<template>
  <div>
    <Row :gutter="20">
      <i-col :xs="12" :md="8" :lg="4" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" style="height: 120px;padding-bottom: 10px;">
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
          <count-to :end="infor.count" count-class="count-style"/>
          <p>{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>
    <Row :gutter="20" style="margin-top: 10px;">

      <i-col :md="24" :lg="16" style="margin-bottom: 20px;">
        <Card shadow>
          <chart-bar style="height: 300px;" :value="barData" text="本周习题练习统计"/>
        </Card>
      </i-col>
    </Row>
    <Row>
      <Card shadow>
        <p align="center" >学习时间统计</p>
        <example style="height: 200px; "/>
      </Card>
    </Row>
  </div>
</template>

<script>
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import { ChartPie, ChartBar } from '_c/charts'
import Example from './example.vue'
export default {
  name: 'home',
  components: {
    InforCard,
    CountTo,
    ChartPie,
    ChartBar,
    Example
  },
  data () {
    return {
      inforCardData: [
        { title: '课程', icon: 'ios-list-box-outline', count: 2, color: '#2d8cf0' },
        { title: '知识点', icon: 'md-locate', count: 7, color: '#19be6b' },
        { title: '习题', icon: 'ios-paper-outline', count: 5, color: '#ff9900' },
        { title: '考试', icon: 'md-paper', count: 1, color: '#ed3f14' },
        { title: '积分', icon: 'logo-yen', count: 0, color: '#9A66E4' }
      ],
      barData: {
        Mon: 2,
        Tue: 0,
        Wed: 3,
        Thu: 5,
        Fri: 0,
        Sat: 0,
        Sun: 0,
      }
    }
  },
  mounted () {
    //
  }
}
</script>

<style lang="less">
.count-style{
  font-size: 50px;
}
</style>
